<template>
    <div class="flexWrap w-per100">
        <div class="chat-item" @click="toEdit">
            <div class="flexWrapBetween">
                <div class="c-name">
                    <span>{{info.creatorName}}</span>
                    <span style="margin-left: 10px; color:#888888;font-size:12px;font-weight:normal">{{info.createAtStr}}</span>
                </div>
            </div>
            <div class="chat-content">
                <div class="c-resource">
                    <div v-for="(r,ridx) in info.resources" class="flexWrap resource">
                        <template v-if="r.type == 11">
                            <div class="r-lk txtLine1">{{r.content}}</div>
                        </template>
                        <template v-else-if="r.type == 21">
                            <el-image v-on:click.stop=""
                                      class="r-img"
                                      :src="r.content" :preview-src-list="[r.content]">
                            </el-image>
                        </template>
                        <template v-else>
                            <img class="r-icon" v-if="r.type == 23" src="@/assets/img/word.png" >
                            <img class="r-icon" v-else src="@/assets/img/doc.png" >
                            <div class="flexWrap r-file">
                                <div class="r-f-t txtLine1">{{r.title}}</div>
                                <div class="r-f-c txtLine1">{{r.content}}</div>
                            </div>
                        </template>

                        <div v-if="r.type != 21" class="r-buttons">
                            <!--10-文字 11-链接 20-文档 21-图片 22-视频 23-DOC-->
                            <template v-if="r.type == 10">
                                <el-button class="mini-el" type="text" size="mini" :id="ridx" v-on:click.stop="toCopy">拷贝</el-button>
                            </template>
                            <template v-else-if="r.type == 11">
                                <el-button class="mini-el" type="text" size="mini" v-on:click.stop="">
                                    <a :href="r.content" target="_blank">打开</a>
                                </el-button>
                                <el-button class="mini-el" type="text" size="mini" :id="ridx" v-on:click.stop="toCopy">拷贝</el-button>
                            </template>
                            <template v-else-if="r.type == 20 || r.type == 22">
                                <el-button class="mini-el" type="text" size="mini" >
                                    <a :href="r.content" target="_blank">下载</a>
                                </el-button>
                            </template>
                            <template v-else-if="r.type == 21">
                                <el-button class="mini-el" type="text" size="mini" v-on:click.stop=""><a :href="r.content" target="_blank">打开</a></el-button>
                                <el-button class="mini-el" type="text" size="mini" v-on:click.stop="toCopy">拷贝</el-button>
                            </template>
                            <template v-else-if="r.type == 23">
                                <el-button class="mini-el" type="text" size="mini" v-on:click.stop="">
                                    <a :href="'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(r.content)" target="_blank">打开</a>
                                </el-button>
                                <el-button class="mini-el" type="text" size="mini" v-on:click.stop="">
                                    <a :href="r.content" target="_blank">下载</a>
                                </el-button>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="c-txt">{{info.title || info.content}}</div>
            </div>
        </div>

        <!--编辑-->
        <el-dialog :visible.sync="edit.show" width="550px" append-to-body border :show-title=false :show-close=false>
            <chat-edit v-if="edit.show" :info="edit.info" @complete="chatOnChange" />
        </el-dialog>
    </div>
</template>
<script>
import ChatEdit from "@/views/chat/components/chatEdit";
export default {
    name: "chat-item",
    props: {
        info: {
            type: Object
        },
        complete: {
            type:Function
        }
    },
    data() {
        return {
            me: {},
            edit: {show:false, info:{}}
        };
    },
    components: {
        ChatEdit
    },
    created() {
        this.me = this.auth.getAccount()
    },
    methods: {
        toCopy(e) {
            let idx = parseInt(e.currentTarget.id)
            let txt = this.info.resources[idx].content
            this.$copyText(txt).then(() => {
                this.$message.success({duration:1000, message:"复制成功"})
            }).catch(err => {
                this.$message.error({duration:1000, message:"复制失败"})
            })
        },

        toDel(e) {
            this.$emit("delete");
        },

        toEdit() {
            if (this.me.id == this.info.creator) {
                this.edit = {show:true, info:{...this.info}}
            }
        },

        chatOnChange(e) {
            this.edit.show = false
        }
    },
};
</script>
<style scoped lang="scss">
.chat-item {
    padding: 5px; margin: 5px 0 0 0; width: 100%;
    overflow-x: hidden;

    .c-name {
        margin: 0 10px; font-size: 13px; line-height: 25px; color: #000000;
    }
    .chat-content {
        background-color: #f8f8f8; border-radius: 5px; padding: 5px;

        .c-resource {
            width: 100%;
            line-height: 20px; font-size: 13px; color: #222222; text-align: left;

            .resource {
                width: 100%; padding: 0 10px; margin-top: 5px;

                .r-lk{
                    width: calc(100% - 70px); height: 25px; font-size: 11px; color: #888888; text-align: left; line-height: 25px;
                }

                .r-icon {
                    width: 40px; height: 40px; margin-right: 10px; object-fit: contain;
                }
                .r-img {
                    width: 100%; height: auto; object-fit: contain;
                }
                .r-file {
                    width: calc(100% - 130px);

                    .r-f-t {
                        width: 100%; font-size: 13px; color: #333333; text-align: left;
                        line-height: 20px;
                    }
                    .r-f-c {
                        width: 100%; font-size: 11px; color: #888888; text-align: left;
                        line-height: 20px;
                    }
                }

                .r-buttons {
                    margin:0 0 0 5px; text-align: left;
                }
            }
        }
        .c-txt {
            margin: 0 10px; width: calc(100% - 20px); line-height: 25px; color: #555555;
            font-size: 13px;

            word-wrap:break-word;
            white-space:pre-wrap;
            overflow-wrap:break-word;
        }
    }
}

</style>
